<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
        <script src="https://cdn.tailwindcss.com"></script>
    </head>
    <body class="">
        <div class="static absolute w-[1200px] h-[630px] bg-[#44b78b]">
            <main class="px-32 pt-12">
                <div class="text-6xl font-bold text-white">Grid :: {{ grid.title }}</div>
                <div class="pt-8 text-4xl text-green-100">{{ grid.description }}</div>
            </main>
            <footer class="absolute bottom-0 left-0 w-full">
                <section class="py-8 px-32">
                    <div class="text-2xl text-gray-900">https://djangogrids.org{% url "grid" slug=grid.slug %}</div>
                </section>
                <section class="flex flex-row py-4 px-32 text-white bg-black">
                    <span class="flex-none self-center"><img src="https://djangopackages.org/static/img/logo_squares.png" alt="[[Django Packages Logo]]"></span>
                    <span class="flex-1 self-center pl-4 text-7xl text-white">Django Packages</span>
                </section>
            </footer>
        </div>
    </body>
</html>
